<template>
  <div class="point-status-rate-chart" id="point-status-rate-chart-id"></div>
</template>

<script>
  import echarts from 'echarts'
  import {transDateTime} from '../../utils/public'

  export default {
    name: "index",
    data() {
      return {
        screenWidth: null,
        echarts: null
      }
    },
    mounted() {

    },
    methods: {
      setData(statusTimesObj) {
        this.echarts = echarts.init(document.getElementById('point-status-rate-chart-id'));
        let me = this;
        let startRate = statusTimesObj['1'] || 0;
        let stopRate = statusTimesObj['0'] || 0;
        let offLineRate = statusTimesObj['3'] || 0;
        let initcolor = "#00ff0c";
        let color = initcolor;
        let size = '100%';
        let background = "#383b3e"; //背景
        let dataStyle = {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            shadowBlur: 40,
            shadowColor: 'rgba(40, 40, 40, 0.5)'
          }
        };
        let option = {
          title: [{
            show: true,
            text: '点位启动占比',
            textStyle: {
              color: '#FFFFFF'
            },
            left: '43%',
            top: '5px'
          }, {
            text: ((startRate / (startRate + stopRate + offLineRate)) * 100).toFixed(2) || 0 + '%',
            x: 'center',
            y: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: color,
              fontSize: parseInt(size) * 0.5
            }
          }],
          backgroundColor: background,
          color: [color, '#8994b8', '#14ff20'],
          tooltip: {
            show: true,
            formatter: function (params, ticket, callback) {
              let color = '';
              switch (params.name) {
                case '启动':
                  color += '#48eb42';
                  break;
                case '停止':
                  color += '#e63743';
                  break;
                case '数据中断':
                  color += '#8994b8';
                  break;

              }
              return `<span style="color: ${color};font-size: medium">${params.name}时长 : ${transDateTime(params.value)}  (${params.percent}%)</span>`;
            }
          },
          toolbox: {
            show: false,
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          series: [{
            name: '启动',
            type: 'pie',
            clockWise: false,
            radius: ['50%', '58%'],
            /*    legend: {
                    type:"scroll",
                    orient: 'vertical',
                    left:'70%',
                    align:'left',
                    top:'middle',
                    textStyle: {
                        color:'#8C8C8C'
                    },
                    height:250
                },*/
            hoverAnimation: false,
            data: [{
              value: startRate,
              name: '启动',
              label: {
                normal: {
                  show: true,
                  color: '#48eb42',
                  fontSize: 16,
                  position: 'outter',
                  formatter: function (parms) {
                    return parms.data.name
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 10,
                  length2: 10
                }
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                    offset: 0,
                    color: '#48eb42'
                  }, {
                    offset: 1,
                    color: '#70ffac'
                  }])
                }
              }
            }, {
              value: stopRate,
              name: '停止',
              label: {
                normal: {
                  show: true,
                  fontSize: 16,
                  color: '#e63743',
                  position: 'outter',
                  formatter: function (parms) {
                    return parms.data.name
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 5,
                  length2: 5,
                  smooth: true,
                }
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                    offset: 0,
                    color: '#eb0764'
                  }, {
                    offset: 1,
                    color: '#e60013'
                  }])
                }
              }
            },
              {
                value: offLineRate,
                name: '数据中断',
                label: {
                  normal: {
                    show: true,
                    fontSize: 16,
                    color: '#8994b8',
                    position: 'outter',
                    formatter: function (parms) {
                      return parms.data.name
                    }
                  }
                },
                labelLine: {
                  normal: {
                    length: 5,
                    length2: 5,
                    smooth: true,
                  }
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                      offset: 0,
                      color: '#8994b8'
                    }, {
                      offset: 1,
                      color: '#37394a'
                    }])
                  }
                }
              }

            ]
          }, {
            name: 'Line 2',
            type: 'pie',
            animation: false,
            clockWise: false,
            radius: ['58%', '60%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            data: [{
              value: 100,
              name: '02',
              itemStyle: {
                normal: {
                  color: "#3c6482",
                },
              }
            }]
          }, {
            name: 'Line 3',
            type: 'pie',
            animation: false,
            clockWise: false,
            radius: ['48%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            data: [{
              value: 100,
              name: '02',
              itemStyle: {
                normal: {
                  color: "#3c6482",
                },
              }
            }
            ]
          }]
        };
        this.echarts.setOption(option);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .point-status-rate-chart {
    height: 330px;
    background-color: #383b3e;
  }
</style>
